<template name="calendar">
	<view>

		<!-- <cu-custom bgColor="bg-gradual-primary" :isBack="false">
			<block slot="content">姨妈日历</block>
		</cu-custom> -->

		<view>
			<uni-calendar :insert="true" :lunar="false" :start-date="'1949-1-1'" :end-date="'2059-12-30'" :selected="chooseData"
			 @change="change" @monthSwitch="monthSwitch" />
		</view>

		<view class="flex padding-xs  align-center justify-center">

			<view class="flex padding-xs  align-center justify-center">
				<text class="flex margin-xs uni-calendar-item__weeks-box-circle1"></text>
				<text> 排卵期 </text>


			</view>

			<view class="flex padding-xs  align-center justify-center">
				<text class="flex margin-xs uni-calendar-item__weeks-box-circle2"></text>
				<text> 预测期 </text>
			</view>

			<view class="flex padding-xs  align-center justify-center">
				<text class="flex margin-xs uni-calendar-item__weeks-box-circle3"></text>
				<text> 来临期 </text>
			</view>

		</view>

		<view @click="addRemark" style="padding: 15rpx;">
			<view v-if="remark" class="calendar-remark">
				{{remark}}
			</view>

			<view v-else="remark" class="calendar-remark">
				备注
			</view>


		</view>
	</view>
</template>

<script>
	import uniCalendar from "@/components/uni-calendar/uni-calendar";
	import Bus from '../../common/bus.vue';
	import helper from '../../common/helper.js';
	export default {
		name: "calendar",
		components: {
			uniCalendar
		},
		data() {
			return {
				chooseData: [],
				userInfo: {},
				hasUserInfo: false,
				remark: '',
				monthDay: ''
				// type ：1 排卵期，2：预测期，3：来临期
				
			}
		},

		created() {
			console.group('created 组件创建完毕状态===============》');
			let that = this;

			//查看是否授权
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log(res);
					if (res.errMsg === 'getStorage:ok') {
						that.userInfo = res.data;
						that.hasUserInfo = true;
						that.generateForecastData(null);
					} else {
						that.hasUserInfo = false;
					}
				},
				fail: function(e) {
					console.log(e);
				}
			});

			Bus.$on('calendarRemark', target => {
				console.log('calendar bus calendarRemark');
				let that = this;
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						console.log(res);
						if (res.errMsg === 'getStorage:ok') {
							that.userInfo = res.data;
							that.hasUserInfo = true;
							that.generateForecastData(null);
						} else {
							that.hasUserInfo = false;
						}
					},
					fail: function(e) {
						console.log(e);
					}
				});
			});


		},
		beforeDestroy() {
			console.log('calendar beforeDestroy');
			Bus.$off('calendarRemark');
		},
		methods: {
			change(e) {
				console.log(e);
			},
			monthSwitch(e) {
				console.log(e);
				let month = e.month;
				let year = e.year;
				let tmp = year + '-' + month + '-01';
				this.monthDay = tmp;
				this.generateForecastData(tmp);

			},
			addRemark() {

				if (!this.remark) {
					uni.showToast({
						title: "该月还没有记录哦！",
						duration: 1000,
						icon: 'none'
					})
					return;
				}
				let userId = this.userInfo.userId;

				if (userId) {
					//在起始页面跳转到test.vue页面并传递参数
					uni.navigateTo({
						url: '../calendar/calendar-remark/calendar-remark?userId=' +
							userId + '&monthDay=' + this.monthDay + '&remark=' + this.remark
					});
				} else {

					uni.showToast({
						title: "未获取到用户信息！",
						duration: 2000,
						icon: 'none'
					})
				}

			},
			// 调用服务器
			generateForecastData(monthDay) {

				let that = this;
				let playod = {
					userId: that.userInfo.userId,
					month: monthDay
				};

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: helper.api + '/appYmrecord/open/generateForecastData', //仅为示例，并非真实接口地址。
					method: 'get',
					data: playod,
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},
					complete() {
						uni.hideLoading();
					},
					success: (res) => {
						console.log(res.data);

						if (res.data.code === 0) {
							that.chooseData = res.data.data.data;
							that.remark = res.data.data.remark;

							// todo 刷新数据
						} else {
							uni.showModal({
								title: '请求失败！',
								content: '错误原因:' + res.data.msg,
								showCancel: false
							});
							return;
						}
					},
					fail: (err) => {
						uni.showModal({
							title: '请求失败！',
							content: '错误原因:' + err,
							showCancel: false
						});
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	.dot-row {
		display: flex;
	}

	.calendar-remark {
		width: 100%;
		padding: 15rpx;
		border: 1px solid;
		margin-top: 50rpx;
		border-radius: 5px;
		border-color: $uni-color-primary;
		color: $uni-text-color-placeholder;

	}

	.uni-calendar-item__weeks-box-circle1 {
		width: 6px;
		height: 6px;
		border-radius: 6px;
		background-color: $uni-color-success;
		opacity: 0.5;

	}

	.uni-calendar-item__weeks-box-circle2 {
		width: 8px;
		height: 8px;
		border-radius: 8px;
		background-color: $uni-color-primary;
		opacity: 0.5;

	}

	.uni-calendar-item__weeks-box-circle3 {
		width: 12px;
		height: 12px;
		border-radius: 10px;
		background-color: $uni-color-primary;

	}
</style>
